<!--
 * @Descripttion: 
 * @version: 
 * @Date: 2021-11-15 17:36:35
-->
<template>
  <div class="vm">
    <h2 class="h-title"></h2>
    <div id="map" class="map-x"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View, Overlay } from "ol";
import { WMTS, XYZ, TileArcGISRest, Vector as VectorSource } from "ol/source";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import * as control from "ol/control";

import { Vector as VectorLayer, Tile } from "ol/layer";
import { GeoJSON } from "ol/format";
import { bbox } from "ol/loadingstrategy";
import { Style, Stroke, Circle, Fill } from "ol/style";
import { Projection } from "ol/proj";

export default {
  name: "GeoServerTileLayer",
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      this.map = new Map({
        controls: control.defaults({ zoom: false }),
        target: "map",
        layers: [
          new Tile({
            source: new XYZ({
              //http://t0.tianditu.gov.cn/img_c/wmts
              //   url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd",
              projection: "EPSG:4326",
            }),
          }),
          new Tile({
            source: new XYZ({
              url: "http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd",
              projection: "EPSG:4326",
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          //   projection: "EPSG:3857",
          center: [119.65216656114372, 27.924359409131114],
          // minZoom:10,
          zoom: 11,
        }),
      });

      //切片名
      let matrixIds = [
        "tianditu4490:0",
        "tianditu4490:1",
        "tianditu4490:2",
        "tianditu4490:3",
        "tianditu4490:4",
        "tianditu4490:5",
        "tianditu4490:6",
        "tianditu4490:7",
        "tianditu4490:8",
        "tianditu4490:9",
        "tianditu4490:10",
        "tianditu4490:11",
        "tianditu4490:12",
        "tianditu4490:13",
        "tianditu4490:14",
        "tianditu4490:15",
        "tianditu4490:16",
        "tianditu4490:17",
        "tianditu4490:18",
        "tianditu4490:19",
        "tianditu4490:20",
        "tianditu4490:21",
      ];
      //分辨率
      let resolutions = [
        0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
        0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125,
        0.001373291015625, 6.866455078125e-4, 3.4332275390625e-4,
        1.71661376953125e-4, 8.58306884765625e-5, 4.291534423828125e-5,
        2.1457672119140625e-5, 1.0728836059570312e-5, 5.364418029785156e-6,
        2.682209014892578e-6, 1.341104507446289e-6, 6.705522537231445e-7,
        3.3527612686157227e-7,
      ];

      //切片策略
      let tileGrid = new WMTSTileGrid({
        tileSize: [256, 256],
        extent: [-180.0, -90.0, 180.0, 90.0], //范围
        origin: [-180.0, 90.0], //切片原点
        resolutions: resolutions, //分辨率
        matrixIds: matrixIds, //层级标识列表，与地图级数保持一致
      });
      //设置地图投影
      let projection = new Projection({
        code: "EPSG:4326",
        units: "degrees",
        axisOrientation: "neu",
      });

      let tileSource = new WMTS({
        url: "http://localhost/geoserver/gwc/service/wmts",
        // layer:"mytest:boul5",
        layer: "jingning:boul5_polygon_buffer",
        format: "image/png",
        matrixSet: "tianditu4490",
        projection: projection,
        // projection: "EPSG:4326",
        tileGrid: tileGrid,
      });

      let tileLayer = new Tile({
        opacity: 0.6, //透明度
        source: tileSource,
        wrapX: false,
      });

      this.map.addLayer(tileLayer);

      //创建wfs资源  
      let wfsVectorSource = new VectorSource({
        format: new GeoJSON(),
        projection: "EPSG:4326",
        // url: "http://192.168.2.152:7080/geoserver/jingning/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jingning%3Aboul6_polygon&maxFeatures=50&outputFormat=application%2Fjson&srsName=EPSG:4490",
        url: "http://112.17.127.75:23081/gis/geoserver/jingning/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jingning%3Aboul6_polygon&maxFeatures=50&outputFormat=application%2Fjson&srsName=EPSG:4490",
        strategy: bbox,
      });
      // 等待数据源的要素加载完毕，触发的事件
      wfsVectorSource.on("featuresloadend", function (evt) {
        console.log(evt, "evt");
      });
      //创建wfs图层，注意需要设置好描边样式，否则不展示效果出来
      let wfsVectorLayer = new VectorLayer({
        source: wfsVectorSource,
        style: new Style({
          image: new Circle({
            radius: 5,
            fill: new Fill({
              color: "#3885ff",
              opacity: 0.5,
            }),
          }),
          stroke: new Stroke({
            color: "blue",
            width: 5,
          }),
        }),
        visible: true,
      });
      this.map.addLayer(wfsVectorLayer);
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
</style>